<template>
  <div class="me">
    <!-- header -->
    <van-nav-bar style="background-color: #4fc08d;" id="reset" title="我的"></van-nav-bar>
    <div v-if="this.$store.state.islogin==0" style="text-align:center;padding-top:20px;margin-top:10px">
      <router-link to="/register">注册</router-link><router-link to="/login">登录</router-link>
    </div>
    <div class="logined" v-else>{{this.$store.state.user.nickname}}</div>
    <!-- 选项 -->
    <div class="xuan">
      <ul>
        <li>
          <router-link to="/"><img class="im" src="../assets/img/预约.png" alt="" /></router-link>
          <p>我的预约</p>
        </li>
        <li>
          <router-link to="/"><img class="im" src="../assets/img/我的订阅.png" alt="" /></router-link>
          <p>我的订阅</p>
        </li>
        <li>
          <router-link to="/"><img class="im" src="../assets/img/通知.png" alt="" /></router-link>
          <p>我的通知</p>
        </li>
      </ul>
    </div>

    <van-cell icon="friends-o"  is-link to="/">
        <span>家庭成员</span>
    </van-cell>
    <van-cell icon="orders-o"  is-link to="/">
        <span>收藏门诊</span>
    </van-cell>
    <van-cell icon="service-o"  is-link to="/">
        <span>联系客服</span>
    </van-cell>
    <van-cell icon="bulb-o"  is-link to="/">
        <span>常见疑问</span>
    </van-cell>
    <van-cell class="shezhi" icon="setting-o"  is-link to="setup">
        <span>设置</span>
    </van-cell>
    <!-- 底部选择卡 -->
    <van-tabbar
      v-model="active"
      class="my_van_tabbar"
      active-color="#4fc08d"
      inactive-color="#000"
      route
    >
      <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/yuyue" icon="location-o">预约</van-tabbar-item>
      <van-tabbar-item to="/kepu" icon="newspaper-o">科普</van-tabbar-item>
      <van-tabbar-item to="/me" icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 1,
    };
  },
};
</script>
<style scoped>
a{
  color: black;
  font-size: 22px;
  margin-left: 10px;
}
.xuan > ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
}
.im{
  width: 40%;
}
.shezhi{
  margin-top: 10px;
}
.logined{
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  padding-top: 20px;
}

#reset /deep/ .van-ellipsis{
		color: white !important;
}
</style>
